<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>06_XHR-获取http数字状态码</title>
  <!-- 
  在使用XMLHttpRequest（XHR）进行HTTP请求时，获取HTTP状态码是非常重要的一步，因为它可以帮助开发者判断请求的结果。HTTP状态码是服务器对请求的响应，用于指示请求的处理情况。
  1. HTTP状态码的基本概念
  HTTP状态码是一个三位数字，表示请求的处理结果。常见的状态码包括：
  - 200：请求成功，服务器返回了请求的数据。
  - 201：请求成功并创建了新的资源。
  - 204：请求成功，但没有返回内容（通常用于DELETE请求）。
  - 400：请求错误，服务器无法理解请求。
  - 401：未授权，用户需要身份验证。
  - 403：禁止访问，服务器拒绝请求。
  - 404：未找到，请求的资源不存在。
  - 500：服务器内部错误，处理请求时发生了错误。

  2. 获取HTTP状态码的方法
  在XHR中，可以通过 `xhr.status` 属性获取HTTP状态码。以下是获取状态码的基本步骤：

  1. 创建XHR对象。
  2. 配置请求（使用 `open` 方法）。
  3. 发送请求（使用 `send` 方法）。
  4. 在 `onload` 或 `onreadystatechange` 事件处理程序中检查 `xhr.status` 。

  3. 示例代码
  以下是一个完整的示例，展示如何获取HTTP状态码：
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com/data', true);

  xhr.onload = function() {
      // 请求完成
      if (xhr.status === 200) {
          console.log('请求成功，状态码：' + xhr.status);
          console.log('响应数据：', xhr.responseText);
      } else {
          console.error('请求失败，状态码：' + xhr.status);
      }
  };

  xhr.onerror = function() {
      console.error('网络错误，无法完成请求。');
  };

  xhr.send();
  4. 使用状态码进行错误处理

  在处理请求时，可以根据不同的状态码执行相应的逻辑。例如：
  if (xhr.status >= 200 && xhr.status < 300) {
      // 处理成功的响应
  } else if (xhr.status === 404) {
      console.error('资源未找到。');
  } else if (xhr.status === 500) {
      console.error('服务器内部错误。');
  } else {
      console.error('请求失败，状态码：' + xhr.status);
  }
  总结

  - 获取HTTP状态码：通过 `xhr.status` 属性获取。
  - 常见状态码：200（成功）、404（未找到）、500（服务器错误）等。
  - 错误处理：根据状态码执行不同的错误处理逻辑。

  理解HTTP状态码的含义和如何获取它们，对于调试和处理网络请求的结果至关重要，能够帮助开发者更好地管理应用的用户体验和数据交互。
  -->
</head>
<body>

  <script>
    // 1. 创建一个XMLHttpRequest对象
    const xhr = new XMLHttpRequest()

    // onload监听数据加载完成
    xhr.onload = function () {
      console.log(xhr.status, xhr.statusText)
      // http状态码判断请求是否成功
      if (xhr.status >= 200 && xhr.status < 300) {
        console.log('请求成功', xhr.status, xhr.response)
      } else {
        console.log('请求失败', xhr.status, xhr.statusText)
      }
    }

    // 3. 配置请求信息
    xhr.open('GET', 'http://123.207.32.32:8000/home/multidata')

    // 4. 发送请求
    xhr.send()


  </script>
  
</body>
</html>